<template>
    <div class="topheader">
        <div class="header">
            <div class="title">高校实验室设备管理系统</div>
            <div style="display: flex;align-items: center;">
                <img :src="info.avatar" style="width: 50px;height:50px;border-radius: 50%;" v-if="info.avatar != null"
                    alt="">
                <el-dropdown>

                    <span class="el-dropdown-link" style="color: rgb(10, 85, 166); ;">
                        {{ info.name !== "" ? info.name : info.username }}<i
                            class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="updateinfo">个人信息</el-dropdown-item>

                            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <el-dialog title="设备" v-model="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
            <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
                <el-form-item label="账号" prop="username">
                    <el-input readonly v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input placeholder="请输入姓名" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input placeholder="请输入密码" type="password" v-model="form.password"></el-input>
                </el-form-item>

                <el-form-item label="头像" prop="coverImage">
                    <el-upload class="avatar-uploader avatar" action="http://localhost:9099/api/files/upload"
                        :show-file-list="false" :accept="'.png,.jpg,.jpeg'" :on-success="handleAvatarSuccess">
                        <img v-if="form.avatar !== ''" :src="form.avatar" class="avatar">
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                        <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                    </el-upload>

                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="fromVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>
<script setup>
import service from '@/request/Request';
import router from '@/router';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
const props = defineProps(["info"]);
const emit = defineEmits(["getinfo"])
const form = ref({})
console.log(props)
const fromVisible = ref(false)
const logout = () => {
    window.localStorage.clear();
    ElMessage({
        type: "success",
        message: "退出成功"
    })
    router.push("/");

}
const updateinfo = () => {
    fromVisible.value = true;
    form.value = JSON.parse(JSON.stringify(props.info))
}
const save = async () => {
    const res = await service.post("/updateinfo", form.value);
    console.log(res)
    if (res.code == 200) {
        fromVisible.value = false;

        emit("getinfo")
    }
}
const handleAvatarSuccess = (e) => {
    form.value.avatar = e.data
}

</script>
<style scoped>
.topheader {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;

}
</style>

<style>
.common-layout {
    width: 100%;
    height: 100%;
}

.container {
    width: 100%;
    height: 100%;
}

.header {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    padding: 0px 20px;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
}



.el-dropdown-link {
    outline: none !important;
}

.title {
    font-size: 20px;
    font-weight: bold;
    color: rgb(10, 85, 166);
}
</style>